<template>
  <div>
    <div style="margin-top: 10px">
      <el-row >
        <!--    推荐商品-->
        <el-col>
          <el-card>
            <div style="padding: 10px 0; border-bottom: 2px solid orangered; font-size: 20px; color: orangered">公益绿植</div>
            <div style="padding: 10px 0">
              <el-row :gutter="10">
                <el-col :span="6" v-for="item in recommend" :key="item.id" style="margin-bottom: 10px">
                  <div style="border: 1px solid #ccc; cursor: pointer; padding: 10px"  @click="goodsDetail(item.id)">
                    <el-image :src="item.imgs" style="width: 100%; height: 100px" fit="contain"></el-image>
                    <div style="padding: 5px; height: 20px; text-align: center; font-size: 12px; overflow: hidden">
                      <el-tooltip :content="item.name" placement="bottom" effect="light">
                        <span class="item-title">{{ item.name }}</span>
                      </el-tooltip>
                    </div>
                    <div style="padding: 5px; text-align: center; font-size: 12px">
                      积分: &nbsp;&nbsp;
                      <span style="color: red; font-size: 14px">{{ item.points }}</span>
                    </div>
                    <div style="padding: 5px; text-align: center; font-size: 12px">
                      种植地: &nbsp;&nbsp;
                      <span style="color: red; font-size: 14px">{{ item.address }}</span>
                    </div>
                  </div>

                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from "@/utils/request";

export default {
  name: "Public",
  data() {
    return {
      url: sessionStorage.getItem("url"),
      sales: [],
      recommend: [],
      tableData: [],
      activeIndex: 0,
      imgList: [],
      user: {},
      categories: [],
      pageNum: 1,
      pageSize: 8,
      total: 0
    };
  },
  created() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.load()
  },
  methods: {
    goodsDetail(id) {
      this.$router.replace({path: '/front/publicGoods', query: {id: id}})
    },
    load() {
      API.get("/system/public_product/listAll").then(res => {
        this.recommend = res.data
        this.recommend.forEach(item => {
          item.imgs = this.url + item.imgs
        })
      })
    },
  },
};
</script>

<style scoped>
.active {
  color: red !important;
}

.category-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ccc;
  color: #666;
  cursor: pointer;
}

.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-title {
  cursor: pointer;
}
.item-title:hover {
  color: orangered;
}
</style>
